<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体检登记</title>
    <link rel="stylesheet" href="../css/phyRegister.css">
    <script src="../js/jquery.js"></script>
    <script>
        $(function () {
            //选择学院
            $("#selectDepart").html("");
            $.ajax({
                url: "/hospital/depart.action",
                dataType: "json",
                Type: "GET",
                success: function (data) {
                    $("#selectDepart").append("<option value=''>请选择学院</option>");
                    $.each(data, function (index, ele) {
                        $("#selectDepart").append("<option value = '"+ele.id+"'>" + ele.departName + "</option>");
                        // console.log($("#selectDepart").val());
                    })
                },
                error: function () {
                    alert("获取数据失败");
                }
            });

            //将select选中的学院id传给后台，查询该学院学生
            getStudent();

            //*********************未获取学院id，当前为select。index
            function getStudent() {
                $("#selectDepart").change(function () {
                    var deptId = $(this).children("option:selected").val();
                    console.log(deptId);
                    $.ajax({
                        url: "/hospital/student.action",
                        data: {"deptId": deptId},
                        type: "GET",
                        success: function (data) {
                            console.log(data);
                        },
                        error: function () {
                            console.log("error");
                        }
                    });
                });
            }

            //1点击标题复选框表示全选
            $("#checkbox").on("click", function () {
                judgement();
            });

            function judgement() {
                var isChecked = $("#checkbox").prop("checked");
                if (isChecked == true) {
                    $(".pro-checkbox").prop("checked", true);
                }
                else {
                    $(".pro-checkbox").prop("checked", false);
                }
            }

            //获取项目列表
            getProject();

            function getProject() {
                $.ajax({
                    url: "/hospital/projects.action",
                    dataType: "json",
                    success: function (data) {
                        var $proTable = $(".project .project-table");
                        $.each(data, function (index, ele) {
                            var $item = createItem(index, ele);
                            $proTable.append($item);
                        });
                    },
                    error: function (e) {
                        console.log(e);
                    }
                });
            }

            //动态创建项目列表
            function createItem(index, ele) {
                var $item = $("" +
                    "<tr>\n" +
                    "            <td><input type=\"checkbox\" class=\"pro-checkbox\"></td>\n" +
                    "            <td class=\"pro\">" + (index + 1) + "</td>\n" +
                    "            <td class=\"pro\">" + ele.proOfcId + "</td>\n" +
                    "            <td class=\"pro\">" + ele.proName + "</td>\n" +
                    "            <td class=\"pro\">" + ele.proRemark + "</td>\n" +
                    "        </tr>")
                return $item;
            }
        })
        ;
    </script>
</head>
<body>
<div class="depart">
    <a>请选择学院：</a>
    <select id="selectDepart">
    </select>
</div>
<div class="project">
    <a>选择体检项目：</a>
    <table class="project-table" border="1">
        <tr>
            <th><input type="checkbox" id="checkbox"></th>
            <th class="pro">id</th>
            <th class="pro">科室</th>
            <th class="pro">项目名称</th>
            <th class="pro">备注信息</th>
        </tr>
        <!--<tr>
            <td><input type="checkbox" class="pro-checkbox"></td>
            <td class="pro">1</td>
            <td class="pro">外科</td>
            <td class="pro">心脏</td>
            <td class="pro">心脏检查</td>
        </tr>-->

    </table>
</div>

</body>
</html>